
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>下载萤石运动</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <base href="http://download.ys7.com/ezvizsport/"></base>
    <style>
    body {
        margin: 0;
        text-align: center;
        color: #fff;
        font-family: 黑体;
    }
    .applogo {
        margin-top: 30px;
        height: 150px;
        text-align: center;
    }
    .applogo img {
        height: 85px;
        width: 85px;
        margin: 5px;
        border-radius: 15px;
    }
    .applogo p {
        font-size: 19px;
        margin: 0;
        line-height: 20px;
    }
    .applogo span {
        font-size: 13px;
    }
    .btn {
        width: 220px;
        position: absolute;
        margin: 0 -110px;
        bottom: 38px;
        left: 50%;
    }
    .btn ul {
        padding: 0;
    }
    .btn ul li {
        list-style: none;
        width: 220px;
        height: 35px;
        padding: 5px 0;
        margin: 24px 0 0 0;
        background: #fff;
        border-radius: 4px;
        position: relative;
    }
    .btn ul li i {
        background: url('icons.png') no-repeat;
        background-size: 65px;
        width: 33px;
        height: 37px;
        position: absolute;
        left: 42px;
    }
    .btn ul li.iphone i {
        background-position: 0 -37px;
    }
    .btn ul li.android i {
        background-position: -33px -37px;
    }
    .btn ul li.active {
        background: #ff9320;
    }
    .btn ul li.iphone.active i {
        background-position: 0 0;
    }
    .btn ul li.android.active i {
        background-position: -33px 0;
    }
    .btn ul li p {
        font-size: 15px;
        line-height: 17px;
        margin: 0;
        color: #767676;
        text-align: left;
margin-left: 38%;
    }
    .btn ul li.active p {
        color: #fff;
    }
    .btn ul li a {
        display: inline-block;
        position: absolute;
        width: 220px;
        height: 45px;
        left: 0;
        top: 0;
    }
    .leading {
        display: none;
        position: absolute;
        z-index: 20;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .leading .curtain {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #000;
        opacity: 0.75;
    }
    .leading img {
        position: absolute;
        right: 10px;
        top: 20px;
        height: 140px;
    }
    .leading .tips {
        width: 220px;
        margin: 0 -110px;
        top: 170px;
        position: absolute;
        left: 50%;
        text-align: left;
        font-size: 14px;
    }
    .leading .tips span {
        color: #ffae00;
    }
    .bg {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
    @media screen and (min-height: 450px){
        .applogo{
            margin-top:40px;
        }

        .btn{
            bottom:60px;
        }
        .leading img {
            height: 180px;
        }
        .leading .tips{
            top:210px;
            width: 240px;
            font-size: 16px;
            margin: 0 -120px;
        }
    }
    @media screen and (min-height: 550px){
        .applogo{
            margin-top:60px;
        }
        .applogo img {
            height: 120px;
            width: 120px;
            border-radius: 20px;
        }
        .btn {
            width: 260px;
            margin: 0 -130px;
            bottom: 90px;
        }
        .btn ul li {
            width: 260px;
        }
        .leading img {
            height: 220px;
        }
        .leading .tips{
            top:250px;
        }

    }
    </style>
</head>

<body>
    <div class="applogo">
        <img src="applogo.jpg" alt="">
        <p>萤石运动</p>
    </div>
    <div class="btn">
        <ul>
            <li class="iphone">
                <i></i>
                <p>iPhone</p>
                <p>立即下载</p>
            </li>
            <li class="android">
                <i></i>
                <p>Android</p>
                <p>立即下载</p>
            </li>
        </ul>
    </div>
    <img src="bg.jpg" alt="" class="bg">
    <div id="leading" class="leading">
        <div class="curtain"></div>
        <img src="arrow.png" alt="">
        <p class="tips">微信内无法下载，请点击右上角按钮，选择<span>「在浏览器中打开」</span>，即可开始下载</p>
    </div>
</body>
<script src="zepto.js"></script>
<script>
function is_weixin() {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
    } else {
        return false;
    }
}
$('.btn').find('li').on('click', function() {
    if (is_weixin()) {
        $('#leading').show();
    } else {
        var _this = this;
        $(this).addClass('active');
        setTimeout(function(){
            $(_this).removeClass('active');
        },300);
        if ($(this).hasClass('iphone')) {
            location.href = 'itms-services://?action=download-manifest&url=https://git.oschina.net/yudan/ezviz/raw/master/pldt.plist';
        } else {
            location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.ezviz.sports';
        }
    }
});
$('#leading').on('click',function(){
    $(this).hide();
});
</script>

</html>
